<template>
  <el-col :span="6">
  <el-card class="box-card">
    <div ref="chart" style="height:38vh;width: 360px;"></div>
   <template #footer>Footer content</template>
  </el-card>
</el-col>
</template>




<script>
import axios from 'axios';
import * as echarts from 'echarts'

export default {
  data() {
    return {
      chart:null,
      data: [] // 初始化 data 变量为空数组
    };
  },
  mounted() {
    this.initChart(); // 初始化 Echarts 实例
    this.fetchData();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
    },
    fetchData() {
      this.$http.get('http://localhost:8080/like/videolike') // 发起后端请求获取查询结果
        .then(response => {
          this.data = response.data; // 将返回的数据赋值给 data 变量
          this.renderChart();
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    },
    renderChart() {
      const options = {
        // 在这里根据需求配置 Echarts 图表的选项
        legend: {
         itemWidth: 10, // 设置图例项的宽度
         itemHeight: 10 // 设置图例项的高度
        },
        title: {
        text: '视频点赞top',
        left: 'center'
  },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },

        xAxis: {
          type: 'category',
          data: this.data.map(row => row.workname), // 使用 this.data 进行 map 操作
          axisLabel: {
          rotate: 45 // 调整旋转角度，可以根据需要进行调整
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'bar',
          data: this.data.map(row => row.videocount) // 使用 this.data 进行 map 操作
        }]
      };
      this.chart.setOption(options);
    }
  }
};
</script>

<style>
/* 在这里添加你的样式 */
</style>